<template>
  <div>
    <el-row class="btn">
      <el-col :span="3">
        <el-button type="success">添加分类</el-button>
      </el-col>
    </el-row>
    <el-table
      :data="tableData"
      style="width: 540px; margin-bottom: 20px"
      row-key="cat_id"
      border
    >
      <el-table-column prop="cat_name" label="分类名称" sortable width="200px" />
      <el-table-column prop="cat_level" label="分类级别" width="100px" />
      <el-table-column prop="cat_deleted" label="是否删除" width="100px" />
      <el-table-column label="操作" width="150">
        <template #default="{  }">
          <el-tooltip
            class="box-item"
            effect="dark"
            content="编辑"
            placement="left-start"
          >
          <el-button type="primary" :icon="'User'" circle />
          </el-tooltip>
          <el-tooltip
            class="box-item"
            effect="dark"
            content="分配角色"
            placement="top"
          >
            <el-button type="success" :icon="'Check'" circle />
          </el-tooltip>

          <el-popconfirm title="真的要删除这个用户吗？" >
            <template #reference>
              <el-button type="danger" :icon="'Delete'" circle />
            </template>
          </el-popconfirm>
        </template>
     </el-table-column>
    </el-table>

  </div>
</template>

<script>
export default {
  name: 'oaCategories',
  data () {
    return {
      tableData: []
    }
  },
  methods: {
    async getCategory () {
      const category = await this.$http.get('categories', { params: { type: [1, 2, 3] } })
      if (category.meta.status !== 200) return

      this.tableData = category.data
    }
  },
  created () {
    this.getCategory()
  }
}
</script>
